<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	    <meta content="yes" name="apple-mobile-web-app-capable">
	    <meta content="yes" name="apple-touch-fullscreen">
	    <meta content="black" name="apple-mobile-web-app-status-bar-style">
	    <meta content="telephone=no,email=no" name="format-detection">
	    <meta name="description" content="">
	    <meta name="keywords" content="">
	    <title>直播间-主播</title>
	    <link rel="stylesheet" href="../static/style/room.css">
	</head>

	<body>
		<section class="room-header flex-h">
			<div class="flex-a-i">
				
			</div>
			<div class="ques-num">
				<div class="arrow"></div>
				<div class="num">11575人次</p></div>
				<div class="click-mask"></div>
				<div class="ques">问题</div>
			</div>
		</section>

		<div class="page page-room">

			<section class="room-main room-main-toolbar">
				<div class="main-talk">
					<div class="time-now">下午4:10</div>

					<div class="talk-list">

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face01@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">张庆</p>
									<p class="identity flex-a-i">主持人</p>
								</div>
								<div class="desc-text flex-h">
									<div class="text">下面有请今天的嘉宾曹名长为大家培训中欧丰泓沪港深基金业务</div>
									<div class="state flex-a-i flex-v-c">
										<p></p>
									</div>
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-voice voice-white flex-h">
									<div class="voice"></div>
									<div class="time-len">31"</div>
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-photo flex-v-c">
									<img src="../static/image/thumbnail@2x.png">
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-file">
									<div class="file-box flex-h">
										<div class="file-icon file-word"></div>
										<!-- <div class="file-icon file-excle"></div>
										<div class="file-icon file-ppt"></div>
										<div class="file-icon file-pdf"></div>
										<div class="file-icon file-txt"></div>
										<div class="file-icon file-unknow"></div> -->
										<div class="file-text flex-a-i">
											<div class="file-name">文件名</div>
											<div class="file-size">文件大小</div>
										</div>
									</div>
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-photo flex-v-c">
									<img src="../static/image/thumbnail@2x.png">
								</div>
							</div>
						</article>

						<article class="talk-item flex-h">
							<div class="item-left">
								<div class="imgbox">
									<img src="../static/image/face02@2x.png">
								</div>
							</div>
							<div class="item-right flex-a-i">
								<div class="desc-title flex-h">
									<p class="author">曹名长</p>
									<p class="identity flex-a-i">主播</p>
								</div>
								<div class="desc-file">
									<div class="file-box flex-h">
										<div class="file-icon file-word"></div>
										<!-- <div class="file-icon file-excle"></div>
										<div class="file-icon file-ppt"></div>
										<div class="file-icon file-pdf"></div>
										<div class="file-icon file-txt"></div>
										<div class="file-icon file-unknow"></div> -->
										<div class="file-text flex-a-i">
											<div class="file-name">文件名</div>
											<div class="file-size">文件大小</div>
										</div>
									</div>
								</div>
							</div>
						</article>

					</div>
				</div>

			</section>
		</div>

		<section class="main-gift">
			<ul>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face03@2x.png">
					</div>
				</li>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face04@2x.png">
					</div>
				</li>
				<li class="flex-h">
					<div class="gift-box">
						<img src="">
					</div>
					<div class="gift-avatar">
						<img src="../static/image/face05@2x.png">
					</div>
				</li>
			</ul>
		</section>

		<section class="room-toolbar">
			<div class="tabnav flex-h">
				<div class="flex-a-i nav-item nav-voice">
					<span>语音</span>
				</div>
				<div class="flex-a-i nav-item nav-keyboard">
					<span>文字</span>
				</div>
				<div class="flex-a-i nav-item nav-words">
					<span>常用语</span>
					<input type="text" id="words-picker" readonly>
				</div>
				<div class="flex-a-i nav-item nav-picture">
					<span>图片</span>
				</div>
				<div class="flex-a-i nav-item nav-file">
					<span>文件</span>
				</div>
			</div>

			<div class="tablist">
				<ul>
					<li class="list-voice" style="display: none;">
						<div class="sound-record record-start">
							<h1>点击开始录音</h1>
							<a href="javascript:void(0);" class="btn-record btn-record-start"></a>
						</div>

						<div class="sound-record record-ing" style="display: none;">
							<h1>0:09</h1>
							<a href="javascript:void(0);" class="btn-record btn-record-ing"></a>
						</div>

						<div class="sound-record record-end" style="display: none;">
							<h1>0:31</h1>
							<a href="javascript:void(0);" class="btn-record btn-record-end"></a>
						</div>

						<div class="btn-box flex-h" style="display: none;">
							<div class="flex-a-i">
								<a href="javascript:void(0);" class="btn-cancle">取消</a>
							</div>
							<div class="flex-a-i">
								<a href="javascript:void(0);" class="btn-ensure">发送</a>
							</div>
						</div>
					</li>

					<li class="list-keyboard" style="display: none;">
						<div class="flex-h">
							<div class="input-box flex-a-i">
								<input type="text" class="input-words">
							</div>
							<div class="btn-box flex-v-c">
								<a href="javascript:void(0);" class="btn-ensure">确定</a>
							</div>
						</div>
					</li>

					<li class="list-words" style="display: none;">
						<div class="picker-box" id="picker-box"></div>

						<div class="btn-box flex-h">
							<div class="flex-a-i">
								<a href="javascript:void(0);" class="btn-cancle">取消</a>
							</div>
							<div class="flex-a-i">
								<a href="javascript:void(0);" class="btn-ensure">发送</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</section>


		<section class="mask-ques" style="display: none;"></section>
		<section class="mask-modal-ques flex-v" id="modal-question" style="display: none;">
			<div class="btn-box">
				<a href="javascript:void(0);" class="btn-back-room">回到直播</a>
			</div>

			<div class="ques-box ques-question flex-a-i flex-v">
				<div class="question-list flex-a-i flex-v">
					<div class="list-tab flex-h">
						<div class="tabs">
							<a href="javascript:void(0);" class="btn-ballot active">最多票数</a>
							<a href="javascript:void(0);" class="btn-time">最新发布</a>
						</div>
					</div>
					<div class="tips">投票最多的问题主播会优先回答哦~</div>
					<div class="list-box flex-a-i">
						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face03@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state"></div>
									</div>
								</div>
								<div class="answer">
									<div class="desc-voice voice-grey flex-h">
										<div class="voice"></div>
										<div class="time-len">31"</div>
									</div>
								</div>
							</div>
						</article>

						<article class="ques-voice flex-h">
							<div class="imgbox">
								<img src="../static/image/face03@2x.png">
							</div>
							<div class="desc-box flex-a-i">
								<h1>李立</h1>
								<h2>10-20 15:45</h2>
								<div class="question">
									<div class="desc-text flex-h">
										<div class="text flex-a-i">基金分红比例如何配置</div>
										<div class="state"></div>
									</div>
								</div>
								<div class="btn-answer">回答</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</section>

		
	    <script src='../static/script/lib/jquery.2.0.0.min.js'></script>
	    <script src='http://m.sui.taobao.org/assets/js/zepto.js'></script>
	    <script src='../static/script/sui/sm.js'></script>
		<script>
			Zepto(function () {
				var _$ = Zepto;

			    _$("#words-picker").picker({
			      roomContainer: '#picker-box',
			      toolbarTemplate: '',
			      cols: [
			        {
			          textAlign: 'center',
			          values: [
			          	{'value': 1, 'text': '欢迎大家积极发言1'},
			          	{'value': 2, 'text': '欢迎大家积极发言2'},
			          	{'value': 3, 'text': '欢迎大家积极发言3'},
			          	{'value': 4, 'text': '欢迎大家积极发言4'},
			          	{'value': 5, 'text': '欢迎大家积极发言5'},
			          	{'value': 6, 'text': '欢迎大家积极发言6'},
			          	{'value': 7, 'text': '欢迎大家积极发言7'},
			          	{'value': 8, 'text': '欢迎大家积极发言8'},
			          	{'value': 9, 'text': '欢迎大家积极发言9'}
			          ]
			        }
			      ]
			    });

				Zepto.init();
			});

			$(function() {
				// toolbar 
				var toolbar = $('.room-toolbar'),
					toolNav = toolbar.find('.tabnav'),
					toolList = toolbar.find('.tablist');

				toolNav.find('.nav-voice').on('click', function() {
					if($(this).hasClass('nav-active')) {
						toolbar.css('z-index', 2);

						$(this).removeClass('nav-active');
						toolList.find('.list-voice').hide();
					} else {
						$(this).addClass('nav-active').siblings().removeClass('nav-active');
						toolList.find('.list-voice').show().siblings().hide();

						toolList.find('.list-voice .record-start').show();
						toolList.find('.list-voice .record-ing').hide();
						toolList.find('.list-voice .record-end').hide();
						toolList.find('.list-voice .btn-box').hide();
					}
				});

				toolNav.find('.nav-keyboard').on('click', function() {
					if($(this).hasClass('nav-active')) {
						toolbar.css('z-index', 2);

						$(this).removeClass('nav-active');
						toolList.find('.list-keyboard').hide();
					} else {
						$(this).addClass('nav-active').siblings().removeClass('nav-active');
						toolList.find('.list-keyboard').show().siblings().hide();
					}
				});

				// words
				toolNav.find('.nav-words input').on('click', function() {
					toolList.find('.list-words .picker-box .picker-modal').remove();
					
					if($(this).parent().hasClass('nav-active')) {
						toolbar.css('z-index', 2);

						$(this).parent().removeClass('nav-active');
						toolList.find('.list-words').hide();
					} else {
						$(this).parent().addClass('nav-active').siblings().removeClass('nav-active');
						toolList.find('.list-words').show().siblings().hide();
					}
				});

				toolList.find('.list-words .btn-cancle').on('click', function() {
					toolbar.css('z-index', 2);
					
					toolNav.find('.nav-words').removeClass('nav-active');
					toolList.find('.list-words').hide();
				});


				// keyboard
				toolList.find('.list-keyboard .input-words').bind('input propertychange', function() {
					var textVal = $(this).val();
					textVal = textVal.trim();

					if(textVal != '') {
						$(this).parent().parent().find('.btn-box .btn-ensure').addClass('btn-able');
					} else {
						$(this).parent().parent().find('.btn-box .btn-ensure').removeClass('btn-able');
					}
				});


				// sound record
				toolList.find('.list-voice .btn-record-start').on('click', function() {
					toolList.find('.list-voice .record-start').hide();
					toolList.find('.list-voice .record-ing').show();
				});

				toolList.find('.list-voice .btn-record-ing').on('click', function() {
					toolList.find('.list-voice .record-ing').hide();
					toolList.find('.list-voice .record-end').show();
					toolList.find('.list-voice .btn-box').show();
				});

				toolList.find('.list-voice .btn-cancle').on('click', function() {
					toolbar.css('z-index', 2);

					toolNav.find('.nav-voice').removeClass('nav-active');
					toolList.find('.list-voice').hide();


					toolList.find('.list-voice .record-start').show();
					toolList.find('.list-voice .record-end').hide();
					toolList.find('.list-voice .btn-box').hide();
				});


				// room header ques-num button
				$('.ques-num .click-mask').on('click', function() {
					$(this).parent().toggleClass('active');
				});

				// room header question button
				$('.room-header .ques-num .ques').on('click', function() {
					$('.mask-ques').fadeIn();
					$('#modal-question').fadeIn();
				});

				// question modal back room button
				$('#modal-question .btn-back-room').on('click', function() {
					$('.mask-ques').fadeOut();
					$('#modal-question').fadeOut();

					toolbar.css('z-index', 2);
					toolNav.find('.nav-item').removeClass('nav-active');
					toolList.find('ul li').hide();
				});

				// question modal tabs button
				$('#modal-question .ques-question .question-list .list-tab .tabs a').on('click', function() {
					if($(this).hasClass('active')) {
						return false;
					} else {
						$(this).addClass('active').siblings().removeClass('active');
					}
				});

				// question answear
				$('.mask-modal-ques .ques-box .list-box .ques-voice .desc-box .btn-answer').on('click', function() {
					toolbar.css('z-index', 205);

					toolNav.find('.nav-voice').addClass('nav-active').siblings().removeClass('nav-active');
					toolList.find('.list-voice').show().siblings().hide();

					toolList.find('.list-voice .record-start').show();
					toolList.find('.list-voice .record-ing').hide();
					toolList.find('.list-voice .record-end').hide();
					toolList.find('.list-voice .btn-box').hide();
				});

			});
		</script>
	</body>
</html>

